<template>
  <div class="emergency">
    <!-- 头 -->
    <el-row :gutter="20" type="flex" class="headWrap">
      <el-col :span="19" class="flex-100" style="align-items: center">
        <el-row type="flex">
          <el-col :span="4">
            <el-tabs v-model="activeName" @tab-click="handleClick" class="tabClass">
              <el-tab-pane label="召开中" name="a1"></el-tab-pane>
              <el-tab-pane label="待召开" name="a2"></el-tab-pane>
            </el-tabs>
          </el-col>
          <el-col :span="16">
            <div class="headTitle">胡云发起的快速会议（29）</div>
          </el-col>
          <el-col :span="4">
            <div class="headTime">
              <i class="el-icon-time" style="font-size: 18px"></i>
              <span style="margin-left: 5px">00:01</span>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="5" class="flex-100">
        <div style="font-size: 14px">
          正在讲话：<span>安全巡视组-刘大大</span>
        </div>
      </el-col>
    </el-row>
    <!-- 内容 -->
    <el-row :gutter="20">
      <el-col :span="19">
        <!-- 视频 -->
        <el-row :gutter="5">
          <el-col :span="blockSpan" v-for="(item, index) in 9" :key="index">
            <div class="block-h">
              <div class="block-h-top">
                <div>
                  <span>2024-03-24</span>
                  <span>星期一</span>
                  <span>18:56:56</span>
                </div>
                <div style="font-size: 16px; cursor: pointer">
                  <span @click="shutup(item)"><i class="el-icon-turn-off-microphone red"></i></span>
                  <span @click="ringOff(item)" style="margin-left: 5px"><i class="el-icon-switch-button"></i></span>
                </div>
              </div>
              <div class="block-h-btm">
                <div style="font-size: 16px">
                  <span>王笑天</span>
                </div>
                <div style="font-size: 14px; cursor: pointer">
                  <span @click="tuneOut(item)">禁止收听</span>
                  <span @click="SetMainScreen(item)" style="margin-left: 5px">设为主画面</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>

        <!-- 模式 -->
        <el-row>
          <el-col :span="24">
            <div class="model-w">
              <div class="model-w-v">
                <div>视图模式</div>
                <div style="margin-left: 10px">
                  <img :src="viewsTab == index ? hm1 : hm2" class="viewModelClass" @click="viewsModel(item, index)"
                    v-for="(item, index) in 5" :key="index" :class="viewsTab == index ? 'highJ' : ''" />
                </div>
              </div>

              <div class="hmClass">
                <div>画面显示</div>
                <div style="margin-left: 10px">
                  <img :src="hmTab == index ? hm1 : hm2" class="hmClass-img" @click="hmModel(item, index)"
                    v-for="(item, index) in 2" :key="index" :class="hmTab == index ? 'highJ' : ''" />
                </div>
              </div>
            </div>
          </el-col>
        </el-row>

        <!-- 按钮 -->
        <el-row type="flex" :gutter="10">
          <el-col :span="12">
            <el-row :gutter="10">
              <el-col :span="item.span" v-for="(item, index) in btnList" :key="index">
                <el-button size="small" class="btnClass" @click="btnTabChange(item, index)"
                  :class="btnTab == index ? 'highJ' : ''">{{ item.name }}</el-button>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <div class="btnClass-r-w">
              <div style="flex: 1; display: flex">
                <div class="btnClass-r-w-flex" @click="forbiddenTone()">
                  <div>
                    <i class="btnClass-font-30"
                      :class="IsForbiddenTone ? 'el-icon-turn-off-microphone red' : 'el-icon-microphone gray'"></i>
                  </div>
                  <div class="btnClass-text">{{ IsForbiddenTone ? "解除静音" : "静音" }}</div>
                </div>
                <div class="btnClass-transcribe">
                  <div style="display: flex; align-items: center">
                    <div @click="transcribe()" style="width: 70px">
                      <div>
                        <i class="btnClass-font-30"
                          :class="IsTranscribe ? 'el-icon-video-play red' : 'el-icon-video-play gray'"></i>
                      </div>
                      <div class="btnClass-text">{{ IsTranscribe ? "停止录制" : "录制" }}</div>
                    </div>
                    <div style="margin-left: 0px">
                      <el-popover placement="top" trigger="click">
                        <ul class="lzUl">
                          <li @click="lzUlCheck(1)">
                            <span>仅主持人可录制</span><i :class="lzCheck == 1 ? 'el-icon-check' : ''"></i>
                          </li>
                          <li @click="lzUlCheck(2)">
                            <span>全体成员可录制</span><i :class="lzCheck == 2 ? 'el-icon-check' : ''"></i>
                          </li>
                          <li @click="lzUlCheck(3)">
                            <span>允许部分成员录制</span><i :class="lzCheck == 3 ? 'el-icon-check' : ''"></i>
                          </li>
                        </ul>
                        <i slot="reference" class="el-icon-arrow-up"></i>
                      </el-popover>
                    </div>
                  </div>
                </div>
                <div class="btnClass-closeVideo" @click="closeVideo()">
                  <div>
                    <i class="btnClass-font-30"
                      :class="IsCloseVideo ? 'el-icon-video-camera red' : 'el-icon-video-camera gray'"></i>
                  </div>
                  <div class="btnClass-text">{{ IsCloseVideo ? "打开视频" : "关闭视频" }}</div>
                </div>
                <div class="btnClass-screenSharing">
                  <div style="display: flex; align-items: center">
                    <div @click="screenSharing()">
                      <div>
                        <i class="btnClass-font-30"
                          :class="IsScreenSharing ? 'el-icon-odometer red' : 'el-icon-odometer gray'"></i>
                      </div>
                      <div class="btnClass-text">{{ IsTranscribe ? "屏幕共享" : "屏幕共享" }}</div>
                    </div>
                    <div style="margin-left: 0px">
                      <el-popover placement="top" trigger="click">
                        <ul class="lzUl">
                          <li @click="pmgxUlCheck(1)">
                            <span>允许部分成员共享</span><i :class="pmgxCheck == 1 ? 'el-icon-check' : ''"></i>
                          </li>
                        </ul>
                        <i slot="reference" class="el-icon-arrow-up"></i>
                      </el-popover>
                    </div>
                  </div>
                </div>
              </div>
              <div class="btnClass-concludeMeeting" @click="concludeMeeting()">
                <div><i class="el-icon-switch-button red btnClass-font-30"></i></div>
                <div class="btnClass-text">结束会议</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <!-- 右边 -->
      <el-col :span="5">
        <el-card class="box-card">
          <div>
            <span class="r-t-title">呼叫列队</span>
          </div>
          <div class="r-t-ul">
            <div class="r-t-li" v-for="(item, index) in 2" :key="index">
              <div class="r-t-li-flex">
                <div class="r-t-li-flex-relative">
                  <div class="r-t-li-flex-dot"></div>
                  <el-avatar size="medium"
                    src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
                </div>
                <div class="r-t-li-flex-c">
                  <div class="r-t-li-flex-c-name">安全巡视组-潘夏彤</div>
                  <div class="r-t-li-flex-c-desc"><span>2024年3月20日</span><span>等待60秒</span></div>
                </div>
                <div>
                  <i class="el-icon-video-camera r-t-li-flex-c-ico-video" @click="rightVideo(item)"></i>
                  <i class="el-icon-phone r-t-li-flex-c-ico-conclude" @click="rightConclude(item)"></i>
                </div>
              </div>
            </div>
          </div>
          <div style="margin-bottom: -12px">
            <el-button type="text" style="margin-right: 10px" @click="requiedPM()">请求共享屏幕</el-button>
            <el-button type="text" @click="rightTuneOut()">禁止收听</el-button>
          </div>
        </el-card>

        <el-card class="box-card">
          <div class="r-c-t-w">
            <span class="r-c-t-w-dot"></span>
            <span class="r-c-t-w-title">呼叫中</span>
          </div>
          <div class="r-c-w-h">
            <div class="r-c-w-h-w">
              <span>安全巡视组-潘夏彤</span>
              <span class="r-c-w-h-w-txt">挂断<i class="el-icon-phone r-c-w-h-w-i"
                  @click="rightConcludeTeam()"></i></span>
            </div>
            <div class="r-c-img-w">
              <div class="r-c-img-w-li" v-for="(item, index) in 7" :key="index">
                <div class="r-c-img-w-li-flex">
                  <div class="r-c-img-w-li-flex-c">
                    <div class="r-c-img-w-li-flex-c-posi">
                      <div class="r-t-li-flex-dot"></div>
                      <div class="r-c-img-w-li-flex-c-checkbox">
                        <el-checkbox size="mini"></el-checkbox>
                      </div>
                      <el-avatar size="medium"
                        src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
                    </div>
                    <div class="r-c-img-w-li-flex-c-txt">夏彤</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>

        <el-card class="box-card">
          <div class="r-c-t-w">
            <span class="r-c-t-w-dot yellow-bg"></span>
            <span class="r-c-t-w-title">未入会</span>
          </div>
          <div class="r-c-w-h">
            <div class="r-c-w-h-w">
              <span>安全巡视组-潘夏彤</span>
              <span class="r-c-w-h-w-txt">重新呼叫<i class="el-icon-video-camera r-c-w-h-w-i blue-bg"
                  @click="rightRestCallTeam()"></i></span>
            </div>
            <div class="r-c-img-w">
              <div class="r-c-img-w-li" v-for="(item, index) in 7" :key="index">
                <div class="r-c-img-w-li-flex">
                  <div class="r-c-img-w-li-flex-c">
                    <div class="r-c-img-w-li-flex-c-posi">
                      <div class="r-t-li-flex-dot"></div>
                      <div class="r-c-img-w-li-flex-c-checkbox">
                        <el-checkbox size="mini"></el-checkbox>
                      </div>
                      <el-avatar size="medium"
                        src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
                    </div>
                    <div class="r-c-img-w-li-flex-c-txt">夏彤</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 视频调度（邀请入会）弹窗 -->
    <el-drawer :visible.sync="drawer" :with-header="false" direction="rtl">
      <div class="drawer-w">
        <el-tabs v-model="activeName1" @tab-click="handleClickTab">
          <el-tab-pane label="设配列表" name="b1">
            <div class="drawer-block-h">
              <el-tree :data="treedata" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false"
                class="treeDataClass">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span style="display: inline-block; width: 180px">{{node.label}}</span>
                  <span>
                    <el-button type="text" size="mini">
                      武汉市江汉区XX街道
                    </el-button>
                    <el-button type="text" size="mini" class="videoClass" @click="facilityVideo(data)">
                      <i class="el-icon-video-play"></i>
                    </el-button>
                  </span>
                </span>
              </el-tree>
            </div>
          </el-tab-pane>
          <el-tab-pane label="通讯录" name="b2">
            <div class="drawer-block-h">
              <el-tree :data="treedata" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false"
                class="treeDataClass">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span style="display: inline-block; width: 180px">{{node.label}}</span>
                  <span>
                    <el-button type="text" size="mini" class="videoClass" @click="teamCall(data)">
                      <i class="el-icon-user-solid"></i>
                    </el-button>
                    <el-button type="text" size="mini" class="videoClass" @click="turnOffCall(data)">
                      <i class="el-icon-turn-off-microphone"></i>
                    </el-button>
                    <el-button type="text" size="mini" class="videoClass" @click="aloneCall(data)">
                      <i class="el-icon-phone red"></i>
                    </el-button>
                  </span>
                </span>
              </el-tree>
            </div>
          </el-tab-pane>
          <el-tab-pane label="群组" name="b3">
            <div class="drawer-block-h"></div>
          </el-tab-pane>
        </el-tabs>
        <div class="fixedBtm">
          <el-row type="flex">
            <el-col :span="12" class="text-center">
              <el-button type="primary" round size="small" class="fixedBtm-btn-150"
                @click="tpCheck()">投屏选中数据</el-button>
            </el-col>
            <el-col :span="12" class="text-center">
              <el-button type="danger" round plain size="small" class="fixedBtm-btn-150 fixedBtm-btn"
                @click="clearCheck()">清除已选择</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-drawer>
    <!-- 轮流入会 弹窗 -->
    <el-drawer :visible.sync="drawer1" :with-header="false" direction="rtl">
      <div class="drawer-w">
        <el-tabs v-model="activeName2" @tab-click="handleClickTab2">
          <el-tab-pane label="会议中" name="c1">
            <div class="drawer-block-h">
              <el-row>
                <el-col :span="24" v-for="i in 5" :key="i">
                  <div>技术支持</div>
                  <div class="flex-wrap">
                    <div class="flex-16" v-for="(item, index) in 7" :key="index">
                      <div class="r-c-img-w-li-flex">
                        <div class="r-c-img-w-li-flex-c">
                          <div class="r-c-img-w-li-flex-c-posi">
                            <div class="r-t-li-flex-dot"></div>
                            <div class="r-c-img-w-li-flex-c-checkbox">
                              <el-checkbox size="mini"></el-checkbox>
                            </div>
                            <el-avatar size="medium"
                              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
                          </div>
                          <div class="r-c-img-w-li-flex-c-txt">夏彤</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="drawer-w-flex-addWait"></div>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
          <el-tab-pane label="等待中" name="c2">
            <div class="drawer-block-h">
              <el-row>
                <el-col :span="24" v-for="i in 5" :key="i">
                  <div>技术支持</div>
                  <div class="r-c-w-h-w-txt">
                    计划入会时间: 2024-03 26 14:00~2024-03 26 14:20
                  </div>
                  <div class="flex-wrap">
                    <div class="flex-16" v-for="(item, index) in 7" :key="index">
                      <div class="r-c-img-w-li-flex">
                        <div class="r-c-img-w-li-flex-c">
                          <div class="r-c-img-w-li-flex-c-posi">
                            <div class="r-t-li-flex-dot"></div>
                            <div class="r-c-img-w-li-flex-c-checkbox">
                              <el-checkbox size="mini"></el-checkbox>
                            </div>
                            <el-avatar size="medium"
                              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
                          </div>
                          <div class="r-c-img-w-li-flex-c-txt">夏彤</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="drawer-w-flex-addWait">
                    <el-button type="primary" plain size="small" @click="addWait()">增加</el-button>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
          <el-tab-pane label="已结束" name="c3">
            <div class="drawer-block-h">
              <el-row>
                <el-col :span="24" v-for="i in 5" :key="i">
                  <div>安全巡视组（6）</div>
                  <div class="r-c-w-h-w-txt">
                    计划入会时间: 2024-03 26 14:00~2024-03 26 14:20
                  </div>
                  <div class="flex-wrap">
                    <div class="flex-16" v-for="(item, index) in 7" :key="index">
                      <div class="r-c-img-w-li-flex">
                        <div class="r-c-img-w-li-flex-c">
                          <div class="r-c-img-w-li-flex-c-posi">
                            <div class="r-t-li-flex-dot"></div>
                            <div class="r-c-img-w-li-flex-c-checkbox">
                              <el-checkbox size="mini"></el-checkbox>
                            </div>
                            <el-avatar size="medium"
                              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
                          </div>
                          <div class="r-c-img-w-li-flex-c-txt">夏彤</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="drawer-w-flex-addWait"></div>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="fixedBtm">
          <el-row type="flex">
            <el-col :span="12" class="text-center">
              <el-button :type="activeName2 != 'c1' ? 'primary' : 'danger'" round size="small" class="fixedBtm-btn-150"
                @click="hangupDrawer1()">{{activeName2 == "c1"? "挂断": activeName2 == "c2"? "呼叫": "重新呼叫"}}</el-button>
            </el-col>
            <el-col :span="12" class="text-center">
              <el-button type="danger" round size="small" class="fixedBtm-btn-150 fixedBtm-btn"
                @click="clearCheckDrawer1()">清除已选择</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import hm1 from "@/assets/img/hm1.jpg";
import hm2 from "@/assets/img/hm2.jpg";
const treedataSource = [
  {
    id: 1,
    label: "一级 1",
    children: [
      {
        id: 4,
        label: "二级 1-1",
        children: [
          {
            id: 9,
            label: "三级 1-1-1",
          },
          {
            id: 10,
            label: "三级 1-1-2",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: "一级 2",
    children: [
      {
        id: 5,
        label: "二级 2-1",
      },
      {
        id: 6,
        label: "二级 2-2",
      },
    ],
  },
  {
    id: 3,
    label: "一级 3",
    children: [
      {
        id: 7,
        label: "二级 3-1",
      },
      {
        id: 8,
        label: "二级 3-2",
      },
    ],
  },
];
export default {
  data() {
    return {
      activeName: "a1", //tab选中
      blockSpan: 8, //span值
      hm1: hm1,
      hm2: hm2,
      viewsTab: 0, //视图模式切换
      hmTab: 0, //画面显示切换
      btnTab: 0, //左下角按钮切换
      btnList: [
        { name: "视频调度（邀请入会）", value: 0, span: 16 },
        { name: "关闭全部", value: 1, span: 8 },
        { name: "对话模式", value: 2, span: 8 },
        { name: "向终端发送字幕", value: 3, span: 8 },
        { name: "轮流入会", value: 4, span: 8 },
        { name: "解除全体静音", value: 5, span: 8 },
        { name: "移出会议室", value: 6, span: 8 },
      ], //左下角按钮list
      IsForbiddenTone: false, //是否禁音
      IsTranscribe: false, //是否录制
      IsCloseVideo: false, //是否关闭视频
      IsScreenSharing: false, //是否屏幕共享
      IsConcludeMeeting: false, //是否结束会议
      lzCheck: null, //是否录制选中
      pmgxCheck: null, //屏幕共享选中
      drawer: false, //邀请入会弹窗
      activeName1: "b1", //邀请入会弹窗tab切换
      treedata: JSON.parse(JSON.stringify(treedataSource)),
      activeName2: "c1", //轮流入会弹窗tab切换
      drawer1: false, //轮流入会弹窗
    };
  },
  mounted() {},
  methods: {
    /**tab切换
     *
     */
    handleClick(tab) {
      console.log(tab);
      this.activeName = tab.name;
    },
    /**禁言
     * item 传的值
     */
    shutup(item) {},
    /**挂断
     * item 传的值
     */
    ringOff(item) {},
    /**禁止收听
     * item 传的值
     */
    tuneOut(item) {},
    /**设为主画面
     * item 传的值
     */
    SetMainScreen(item) {},
    /**视图模式
     * item 传的值
     * index 序号
     */
    viewsModel(item, index) {
      this.viewsTab = index;
    },
    /**画面模式
     * item 传的值
     * index 序号
     */
    hmModel(item, index) {
      this.hmTab = index;
    },
    /**左下角按钮切换事件
     * item 值
     * index 序号
     */
    btnTabChange(item, index) {
      this.btnTab = index;
      if (item.value == 0) {
        this.drawer = true;
      } else if (item.value == 4) {
        this.drawer1 = true;
      }
    },
    /**是否禁音 */
    forbiddenTone() {
      this.IsForbiddenTone = !this.IsForbiddenTone;
    },
    /**是否录制事件 */
    transcribe() {
      this.IsTranscribe = !this.IsTranscribe;
    },
    /**是否打开视频 */
    closeVideo() {
      this.IsCloseVideo = !this.IsCloseVideo;
    },
    /**屏幕共享 */
    screenSharing() {
      this.IsScreenSharing = !this.IsScreenSharing;
    },
    /**结束会议 */
    concludeMeeting() {},
    /**录制选中 */
    lzUlCheck(index) {
      this.lzCheck = index;
    },
    /**屏幕共享选中 */
    pmgxUlCheck(index) {
      this.pmgxCheck = index;
    },
    /**右上角视频事件 */
    rightVideo(item) {},
    /**右上角挂断事件 */
    rightConclude(item) {},
    /**右边请求屏幕共享 */
    requiedPM() {},
    /** 右边禁止收听*/
    rightTuneOut() {},
    /**右边组挂断 */
    rightConcludeTeam() {},
    /**重新呼叫 */
    rightRestCallTeam() {},
    /**投屏已选中的数据 */
    tpCheck() {
      this.drawer = false;
    },
    // 清除已选中的数据
    clearCheck() {},
    /**邀请入会弹窗tab切换 */
    handleClickTab(tab) {
      this.activeName1 = tab.name;
    },
    /**邀请入会弹框- 通讯录-群呼 */
    teamCall(item) {},
    /**邀请入会弹框- 通讯录-禁言*/
    turnOffCall(item) {},
    /** 邀请入会弹框- 通讯录-直呼*/
    aloneCall(item) {},
    /**邀请入会弹框- 设备列表-video */
    facilityVideo(item) {},
    /**轮流入会tab切换 */
    handleClickTab2(tab) {
      this.activeName2 = tab.name;
    },
    /**轮流入会弹窗 挂断*/
    hangupDrawer1() {
      this.drawer1 = false;
    },
    /**轮流入会弹窗 清除已选择事件 */
    clearCheckDrawer1() {},
    /**增加等待的人 */
    addWait() {},
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/emergency.scss";
</style>